<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>下单</title>
<!--    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">-->
    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
    <style>
        body {
            margin: 10px;
        }

        .demo-carousel {
            height: 200px;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
<script src="./layui/layui.all.js"></script>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>-->
<table id="goodsList" lay-filter="test"></table>
<script>
    //Demo
    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#goodsList'
            ,url:'/goods/list/'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {field:'id', width:80, title: 'ID', sort: true}
                ,{field:'name', width:240, title: '商品名称'}
                ,{field:'stock', width:160, title: '商品库存', sort: true}
                ,{field:'price', width:160, title: '商品价格',templet:function (data) {
                    var price = parseFloat(data.price).toFixed(2); //设置小数点后个数
                    return price;
                }}
                ,{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}
            ]]
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.data.records //解析数据列表
                };
            }
            ,page:true,
            done: function (res, curr, count) {
                table = res.data.records;
            }
        });

        table.on('tool(test)', function(obj){
            const data = obj.data;
            const price = parseFloat(data.price).toFixed(2)
            if(obj.event === 'pay'){
                const url = "/order/submit";
                const param = {
                    "userId":1001,
                    "goodsId":data.id,
                    "quantity":1,
                    "price":price
                }
                console.log(param)

                $.ajax({
                    url: url,
                    async: false,
                    type: "POST",
                    contentType: 'application/json;charset=UTF-8',
                    dataType: "json",
                    data: JSON.stringify(param),
                    success: function (data) {
                        console.log(data)
                        if (data.code == '0') {
                            self.location = "/pay.html?" + data.data.id
                        } else {
                            layer.msg(data.msg);
                        }
                    }
                })
            }
        });
    });
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="pay">购买</a>
</script>
</body>
</html>

